<template>
  <div class="mytable">
    <div class="search-box">
        <div class="handle-box">
            <div class="search-item">
                <el-input v-model="searchcondition.keyWord" placeholder="用户/手机搜索"></el-input>
            </div>
            <div class="search-item">
                <el-select v-model="searchcondition.stationId" placeholder="所属加油站" :popper-append-to-body="false">
                    <el-option label="全部" value=""></el-option>
                    <el-option :label="item.name" :value="item.id" :key="item.id" v-for="item in stations"></el-option>
                </el-select>
            </div>
            <div class="search-item">
                <el-select v-model="searchcondition.memberType" placeholder="用户类型" @change="memberChange" :popper-append-to-body="false">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="成长型会员" value="GROWUP"></el-option>
                    <el-option label="专属会员" value="EXCLUSIVE"></el-option>
                </el-select>
            </div>
            <div class="search-item" v-if="searchcondition.memberType == 'GROWUP'">
                <el-select v-model="searchcondition.cusLevelId" placeholder="请选择会员等级" :popper-append-to-body="false">
                    <el-option label="全部" value=""></el-option>
                    <el-option :label="item.name" :value="item.id" :key="item.id" v-for="item in levelList"></el-option>
                </el-select>
            </div>
            <div class="search-item" v-if="searchcondition.memberType == 'EXCLUSIVE'">
                <el-select v-model="searchcondition.exclusiveId" placeholder="会员群体" :popper-append-to-body="false">
                    <el-option label="全部" value=""></el-option>
                    <el-option :label="item.groupName" :value="item.id" :key="item.id" v-for="item in groups"></el-option>
                </el-select>
            </div>
            <div class="search-item">
                <el-select v-model="searchcondition.rechargeType" placeholder="支付方式" :popper-append-to-body="false">
                    <el-option label="全部" value=""></el-option>
                    <template v-for="item in rechargeType">
                        <el-option :label="item.name" :value="item.value" :key="item.id"  v-if="item.value != 7"></el-option>
                    </template>
                </el-select>
            </div>
            <div class="search-operating">
                <el-button type="primary" @click="refresh"><i class="iconfont icon-sousuo1"></i>&nbsp;搜索</el-button>
                <el-button type="primary" @click="handleReset"><i class="iconfont icon-_zhongzhi-copy"></i>&nbsp;重置</el-button>
                <el-button type="primary" @click="handleAll">订单删除</el-button>
            </div>
        </div>
        <el-collapse-transition>
            <div class="more-search" v-show="showSearch">
                <div class="search-item">
                    <el-date-picker v-model="searchcondition.startTime" :picker-options="pickerOptions" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择订单开始日期"></el-date-picker>
                </div>
                <div class="search-item">
                    <el-date-picker v-model="searchcondition.endTime" :picker-options="pickerOptions" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择订单结束日期"></el-date-picker>
                </div>
                <div class="search-item">
                    <el-select v-model="searchcondition.staffId" placeholder="加油员" :popper-append-to-body="false">
                        <el-option label="全部" value=""></el-option>
                        <el-option :label="item.name" :value="item.id" :key="item.id" v-for="item in staffList"></el-option>
                    </el-select>
                </div>
                <div class="search-item">
                    <el-select v-model="searchcondition.prodKind" placeholder="油品" :popper-append-to-body="false">
                        <el-option label="全部" value=""></el-option>
                        <el-option :label="item.name" :value="item.kind" :key="item.id" v-for="item in oilKind"></el-option>
                    </el-select>
                </div>
                <div class="search-item">
                    <el-select v-model="searchcondition.paymentStatus" placeholder="交易状态" :popper-append-to-body="false">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="支付成功" value="3"></el-option>
                        <el-option label="待支付" value="1"></el-option>
                        <el-option label="已撤销" value="201"></el-option>
                    </el-select>
                </div>
            </div>
        </el-collapse-transition>
        <div class="search-btn" @click="showSearch=!showSearch">
            搜索更多<i class="el-icon-arrow-right search-icon"></i>
        </div>
    </div>
    <v-table class="table" :data="tableData" :table="table" :page="page" :loading="loading"></v-table>
  </div>
</template>

<script>
import tool from '@/utils/mixins';
export default {
    name:'mytable',
    mixins: [tool],
    data() {
        return {
            listUrl:'',
            table:{
                selectionChange:this.handleSelectionChange,
                thead: [
                    { label:'订单编码', attr:'orderCode',width:220},
                    { label:'用户名称', attr:'nickName',width:120},
                    { label:'用户类型', analyze:row=>row.exclusiveId ? '专属会员':'成长型会员',width:120},
                    { label:'订单时间', attr:'createDate',filter:'datetime',width:180},
                    { label:'油站名称', attr:'stationName',width:180},
                    { label:'枪号', attr:'gunCode',width:80},
                    { label:'油品', attr:'prodName',width:100},
                    { label:'销售金额', analyze:row=>this.getAmount(row,'orderPrice'),filter:'money',width:140},
                    { label:'实付金额', analyze:row=>this.getAmount(row,'actualPayment'),filter:'money',width:140},
                    { label:'支付方式', attr:'rechargeTypeName',width:100},
                    { label:'加油员', attr:'staffName',width:140},
                    { label:'交易状态', className:this.getStatus,attr:'paymentStatus',width:100},
                    { label:'操作',width: 220,fixed:"right",
                        buttons:[
                            {label: '查看详情',  event:this.handleDetail},
                            {label: '删除',  event:this.handleDel},
                            {label: '撤销订单',show:this.isShowCash,event:this.handleCancel},
                        ]
                    }
                ]
            },
            tableData:[{orderCode:'545645645645615616515616',nickName:'测试名称',exclusiveId:'',createDate:'2020-11-27 16:01:42',stationName:'测试油站名称',gunCode:1,prodName:'92#汽油',money:{orderPrice:2.33,actualPayment:2},rechargeTypeName:'微信支付',staffName:'张三',status:1,paymentStatus:'支付成功'},{orderCode:'545645645645615616515616',nickName:'测试名称',exclusiveId:'',createDate:'2020-11-27 16:01:42',stationName:'测试油站名称',gunCode:1,prodName:'92#汽油',money:{orderPrice:2.33,actualPayment:2},rechargeTypeName:'微信支付',staffName:'张三',status:1,paymentStatus:'支付成功'}],
            stations:[],
            levelList:[],
            groups:[],
            rechargeType:[],
            staffList:[],
            oilKind:[]
        }
    },
    methods: {
        getAmount(row,attr){
            return row.money[attr]
        },
        isShowCash(val){
            if(val.rechargeType == 8){
                if(val.cancelFlag == 0){
                    return false
                }else if(val.cancelFlag == 1){
                    return true
                }
            }
        },
        getStatus(row){
            if (row.status == 1) {
                return 'tag_btn_min tab_btn_green'
            } else{
                return 'tag_btn_min tab_btn_red';
            }
        },
        memberChange(){},
        refreshData(){},
        resetSearch(){},
        handleAll(){
            if (!this.selectIds.length) {
                this.$message.info('请选择要处理的数据！');
                return;
            } else {
                this.ids = this.selectIds.map(item=>item.id);
                // this.delWith();
            }
        },
        handleDetail(row){
            this.detailData = row;
            this.btnTitle = '';
            this.btnType = '';
            this.orderDetail = true;
        },
        handleDel(row){
            this.detailData = row;
            this.btnTitle = '确定删除';
            this.btnType = 'del';
            this.orderDetail = true;
        },
        handleCancel(row){
            this.detailData = row;
            this.btnTitle = '确定撤销';
            this.btnType = 'cancel';
            this.orderDetail = true;
        },
    },
}
</script>
